<template>
  <div class="school-card">
    <img class="school-icon" :src="icon" alt="">
    <span class="school-name">{{name}}</span>
  </div>
</template>

<script>
export default {
  name: 'SchoolCard',
  props: {
    icon: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
.school-card{
  cursor: pointer;
  float: left;
  margin-left: 20px;
  margin-top: 20px;
  width: 334px;
  height: 90px;
  border: 1px solid #EFF0F1;
  box-sizing: border-box;
  padding: 20px;
  .school-icon{
    width: 50px;
    height: 50px;
    vertical-align: middle;
  }
  .school-name{
    margin-left: 8px;
    font-size: 16px;
    color: #1F2329;
    vertical-align: middle;
  }
}
</style>
